<script>
import axios from "axios";
import {getFilmMovie, ListAllFilm} from "@/api/film";

/**
 * 播放页面
 */
export default {
  data() {
    return {
      movie: {
        // name: '', // 初始为空，将从API获取
        // resolution: 1080,
        // src: 'https://cdn.pixabay.com/video/2021/12/30/102959-661305174_large.mp4'   // 初始为空，将从API获取
        name: '', // 初始为空，将从API获取
        src: 'https://cdn.pixabay.com/video/2021/12/30/102959-661305174_large.mp4'   // 将从API获取
      }
    };
  },
  methods: {
    fetchMovie() {
      try {
        // 从URL参数中获取fid值
        const params = new URLSearchParams(window.location.search);
        const movieId = params.get('fid');
        console.log(`fid: ${movieId}`);
        // 使用getFilmMovie函数发送请求，获取电影信息
        getFilmMovie(movieId).then(res => {
          console.log(res.data);
          // 更新数组中第一个对象的name和src属性
          this.movie.name = res.data.name;
          this.movie.src = res.data.src;
        });

      } catch (error) {
        console.error('获取电影信息失败:', error);
      }
    },
    goBack() {
      this.$router.go(-1)
    }
  },
  mounted() {
    // 组件加载完成后，获取电影信息
    this.fetchMovie();
  }
};
</script>

<template>
  <div id="app">
    <div class="player-container">
      <vue-core-video-player class="video" :src="movie.src" autoplay loop="true"/>
      <!--      <vue-core-video-player class="video" src="https://cdn.pixabay.com/video/2024/03/08/203449-921267347_large.mp4" title="原神启动" autoplay loop = "true"/>-->
    </div>
    <el-page-header @back="goBack" content="播放页面">
    </el-page-header>
  </div>
</template>

<style scoped>
.player-container {
  position: relative;
  width: 100%;
  height: 800px;

  overflow: hidden;
}

.video {
  top: 10px;
  width: 100%;
  height: 100%;
}

.el-page-header {
  margin-top: 20px;
  margin-left: 20px;
  color: #f0f0f0;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";
  transition: all 0.4s ease-in-out;
}

.el-page-header.hover,
.el-page-header:hover {
  color: #7b8cf6;
  transition: all 0.4s ease-in-out;
}

::v-deep .el-page-header__content {
  color: #f0f0f0;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, sans-serif, "宋体";

}
</style>